<template>
    <div>
        <el-table :data="feedbackList" style="width: 100%">
            <el-table-column label="反馈ID" prop="feedback_id"></el-table-column>
            <el-table-column label="用户ID" prop="user_id"></el-table-column>
            <el-table-column label="反馈内容" prop="content"></el-table-column>
            <el-table-column label="状态" prop="status">
                <template #default="{ row }">
                    <el-tag :type="getStatusTagType(row.status)">
                        {{ getStatusLabel(row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="管理员回复">
                <template #default="scope">
                    <el-input v-if="scope.row.status === 'pending'" v-model="replyContents[scope.row.feedback_id]"
                        placeholder="输入回复" @keyup.enter.native="replyFeedback(scope.row)" size="small"
                        clearable></el-input>
                    <span v-else>{{ scope.row.admin_reply }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button v-if="scope.row.status === 'pending'" type="primary" size="small"
                        @click="replyFeedback(scope.row)">
                        回复
                    </el-button>
                    <el-button type="danger" size="small" @click="deleteFeedback(scope.row)" style="margin-left: 5px;">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { feedbackApi } from '@/request/apiService';
import { ElTag, ElMessage, ElMessageBox } from 'element-plus';

const feedbackList = ref([]);
const replyContents = reactive({});

// 获取状态对应的中文标签
const getStatusLabel = (status) => {
    const statusMap = {
        pending: '待处理',
        replied: '已回复',
    };
    return statusMap[status] || '未知状态';
};

// 获取状态对应的标签类型
const getStatusTagType = (status) => {
    const typeMap = {
        pending: 'warning', // 黄色
        replied: 'info',    // 蓝色
        closed: 'success',  // 绿色
    };
    return typeMap[status] || 'info';
};

// 获取反馈列表
const fetchFeedbackList = async () => {
    try {
        const response = await feedbackApi.getFeedbackList({ page: 1, pageSize: 10 });
        feedbackList.value = response.data;
        // 初始化回复内容
        response.data.forEach(feedback => {
            if (feedback.status === 'pending') {
                replyContents[feedback.feedback_id] = feedback.admin_reply || '';
            }
        });
    } catch (error) {
        console.error('获取反馈列表失败:', error);
        ElMessage.error('获取反馈列表失败，请稍后再试。');
    }
};

// 回复反馈
const replyFeedback = async (feedback) => {
    const replyContent = replyContents[feedback.feedback_id];
    if (!replyContent.trim()) {
        ElMessage.warning('回复内容不能为空。');
        return;
    }

    try {
        await feedbackApi.replyFeedback({
            feedback_id: feedback.feedback_id,
            admin_reply: replyContent.trim(),
        });
        ElMessage.success('回复成功！');
        fetchFeedbackList(); // 刷新反馈列表
    } catch (error) {
        console.error('回复反馈失败:', error);
        ElMessage.error('回复反馈失败，请稍后再试。');
    }
};

// 删除反馈
const deleteFeedback = async (feedback) => {
    try {
        await ElMessageBox.confirm(
            '确认删除此反馈吗？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        await feedbackApi.deleteFeedback({ feedback_id: feedback.feedback_id });
        ElMessage.success('反馈已删除。');
        fetchFeedbackList(); // 刷新反馈列表
    } catch (error) {
        if (error !== 'cancel') {
            console.error('删除反馈失败:', error);
            ElMessage.error('删除反馈失败，请稍后再试。');
        }
    }
};

onMounted(fetchFeedbackList);
</script>

<style scoped>
.feedback-section {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.feedback-section h3 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.feedback-form {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-select {
    width: 100%;
}

.submit-btn {
    width: 100%;
    font-size: 16px;
    padding: 10px;
    background-color: #3498db;
    color: white;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #2980b9;
}

.feedback-table {
    margin-top: 20px;
    border-radius: 8px;
}

.el-table {
    background-color: #fff;
}

.el-table-column {
    padding: 10px;
}
</style>
